<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>好看的摆钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            overflow-x: hidden;
        }
        body {
            background: #434343;
            width: 100%;
            height: 100svh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Bungee Spice', sans-serif;
            overflow-x: hidden;
            min-height: 480px;
            color: #c23307;
            font-weight: bold;
        }
        .container {
            position: relative;
            min-height: 250px;
        }
        .bubble-wrap {
            width: 350px;
            height: 350px;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .bubbles-bg {
            position: relative;
            height: 100%;
            display: flex;
            gap: 22px;
            justify-content: center;
            width: 100%;
        }
        .bubbles-bg span {
            display: inline-block;
            position: relative;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: animate 5s linear infinite;
            animation-duration: calc(150s / var(--i));
        }
        @keyframes animate {
            0% {
                transform: translateY(350px) scale(0);
                background-color: #df6208;
                box-shadow: 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31,
                0 0 70px #e67d31;
            }
            50% {
                background: #d3df08;
                box-shadow: 0px 0px 4px 4px #e4ec53, 0 0 30px #e4ec53,
                0 0 70px #e4ec53;
            }
            70% {
                background: #df0808;
                box-shadow: 0px 0px 4px 4px #ec4242, 0 0 30px #ec4242,
                0 0 70px #ec4242;
            }
            100% {
                transform: translateY(-10px) scale(1);
                background-color: #df6208;
                box-shadow: 0px 0px 4px 4px #e67d31, 0 0 30px #e67d31,
                0 0 70px #e67d31;
            }
        }
        .clock {
            width: 350px;
            height: 350px;
            border-radius: 50%;
            position: relative;
            -webkit-box-shadow: inset inset 0px 0px 12px 12px rgba(0, 0, 0, 1), 0px
            0px 65px 5px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: inset inset 0px 0px 12px 12px rgba(0, 0, 0, 1), 0px 0px
            65px 5px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0px 0px 12px 12px rgba(0, 0, 0, 1), 0px 0px 65px 5px
            rgba(0, 0, 0, 0.5);
            background: #1a1c1a;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 110px;
        }
        .clock::before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #df6208;
            background-color: #2f362f;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .inner-circle {
            width: 200px;
            height: 350px;
            border-radius: 50%;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: start;
        }
        .inner-circle-2 {
            width: 150px;
            height: 250px;
        }
        .inner-circle-3 {
            width: 100px;
            height: 155px;
        }
        .border-circle {
            border-radius: 50%;
            position: absolute;
            background: transparent;
            border: 2px solid rgba(223, 98, 8, 0.2);
            left: 50%;
            top: 50%;
            width: 180px;
            height: 180px;
            transform: translate(-50%, -50%);
        }
        .border-circle:nth-child(2) {
            width: 130px;
            height: 130px;
        }
        .border-circle:nth-child(3) {
            width: 80px;
            height: 80px;
        }
        .inner-circle div {
            position: relative;
            height: 50%;
            width: 7px;
            z-index: 1;
            border-radius: 5px;
            display: inline-block;
            transform-origin: bottom;
            transform: scale(0.5);
            z-index: 0;
            background: rgb(223, 98, 8);
            background: linear-gradient(
                    180deg,
                    rgba(223, 98, 8, 0.9108018207282913) 50%,
                    rgba(255, 0, 0, 0.9304096638655462) 100%
            );
        }
        .inner-circle-2 div {
            width: 4px;
        }
        .inner-circle-3 div {
            width: 3px;
        }
        span {
            position: absolute;
            text-align: center;
            transform: rotate(calc(var(--i) * 29.7deg));
            inset: 25px;
        }
        span b {
            font-size: 18px;
            position: absolute;
            text-align: center;
            transform: rotateZ(calc(var(--i) * -30deg));
            display: inline-block;
            opacity: 0.9;
        }

        /* digital clock */
        .digital-time-wrap {
            width: 10px;
            height: 80%;
            background-color: #1a1c1a;
            position: absolute;
            left: 48.5%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            animation-name: rotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            transform-origin: 50% 0%;
            animation-timing-function: linear;
        }
        @keyframes rotate {
            0% {
                transform: rotate(-6deg);
                animation-timing-function: ease-in;
            }
            25% {
                transform: rotate(0deg);
                animation-timing-function: ease-out;
            }
            50% {
                transform: rotate(6deg);
                animation-timing-function: ease-in;
            }
            75% {
                transform: rotate(0deg);
                animation-timing-function: ease-out;
            }
            100% {
                transform: rotate(-6deg);
            }
        }
        #digital-time {
            width: fit-content;
            display: flex;
            padding: 10px;
            border: 2px solid rgba(0, 0, 0, 0.5);
            border-radius: 20px;
            -webkit-box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 65px 5px rgba(0, 0, 0, 0.5);
            background: #242824;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
        }
        #digital-time div {
            font-size: 20px;
            width: 50px;
            text-align: center;
            position: relative;
        }
        #digital-time div:nth-child(1)::after,
        #digital-time div:nth-child(2)::after {
            content: ':';
            position: absolute;
            right: -4px;
            opacity: 0.7;
        }
        #digital-time div:nth-child(4) {
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<body>
<div class="container">
    <div class="clock">
        <div class="bubble-wrap">
            <div class="bubbles-bg">
                <span style="--i: 15"></span>
                <span style="--i: 12"></span>
                <span style="--i: 18"></span>
                <span style="--i: 22"></span>
                <span style="--i: 20"></span>
                <span style="--i: 23"></span>
                <span style="--i: 13"></span>
                <span style="--i: 18"></span>
                <span style="--i: 28"></span>
                <span style="--i: 24"></span>
                <span style="--i: 15"></span>
                <span style="--i: 21"></span>
            </div>
        </div>
        <!-- border inner  -->
        <div class="border-circle"></div>
        <div class="border-circle"></div>
        <div class="border-circle"></div>

        <div class="inner-circle inner-circle-1" id="sec">
            <div></div>
        </div>
        <div class="inner-circle inner-circle-2" id="min">
            <div></div>
        </div>
        <div class="inner-circle inner-circle-3" id="hrs">
            <div></div>
        </div>

        <!-- Number of clock -->
        <span style="--i: 1"><b>1</b></span>
        <span style="--i: 2"><b>2</b></span>
        <span style="--i: 3"><b>3</b></span>
        <span style="--i: 4"><b>4</b></span>
        <span style="--i: 5"><b>5</b></span>
        <span style="--i: 6"><b>6</b></span>
        <span style="--i: 7"><b>7</b></span>
        <span style="--i: 8"><b>8</b></span>
        <span style="--i: 9"><b>9</b></span>
        <span style="--i: 10"><b>10</b></span>
        <span style="--i: 11"><b>11</b></span>
        <span style="--i: 12"><b>12</b></span>

        <!-- digital clock -->
        <div class="digital-time-wrap">
            <div id="digital-time">
                <div id="hours">00</div>
                <div id="minuts">00</div>
                <div id="seconds">00</div>
                <div id="ampm">PM</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let hrs = document.querySelector('#hrs');
    let sec = document.querySelector('#sec');
    let min = document.querySelector('#min');

    setInterval(() => {
        let day = new Date();
        let hh = day.getHours() * 30;
        let mm = day.getMinutes() * 6;
        let ss = day.getSeconds() * 6;

        hrs.style.transform = `rotateZ(${hh + mm / 12}deg)`;
        min.style.transform = `rotateZ(${mm}deg)`;
        sec.style.transform = `rotateZ(${ss}deg)`;
    });

    // digital clock
    function updateClock() {
        const now = new Date();

        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        const ampm = hours >= 12 ? 'PM' : 'AM';

        document.getElementById('hours').textContent = formatTime(
            hours % 12 || 12
        );
        document.getElementById('minuts').textContent = formatTime(minutes);
        document.getElementById('seconds').textContent = formatTime(seconds);
        document.getElementById('ampm').textContent = ampm;
    }

    function formatTime(time) {
        return time < 10 ? '0' + time : time;
    }

    setInterval(updateClock, 1000);
    updateClock();
</script>
</body>
</html>
